<template>
	<view>
		<!-- <mescroll-uni :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view> @down, @up 必须配置 </view>
			<view> :down, :up 可省略 </view>
			<view v-for="data in dataList"> 数据列表... </view>
		</mescroll-uni> -->
		<!-- <view class="cu-bar bg-cyan search fixed">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" value="" placeholder="搜索商品名称" />
			</view>
			<view class="action" @click="changeList">
				<text class="cuIcon-cascades"></text>
			</view>
		</view> -->
		<view class="cu-bar tabbar bg-white">
			<view class="action">
				<view class="text-green">综合</view>
			</view>
			<view class="action">
				<view class="text-green">价格</view>
			</view>
			<view class="action">
				<view class="text-green">销量</view>
			</view>
			<view class="action">
				<view class="text-green">新品</view>
			</view>
		</view>

		<columnList :goodsList="goodsList" v-if="showType"></columnList>
		<rowsList :goodsList="goodsList" v-else></rowsList>
	</view>
</template>

<script>
	import rowsList from '@/components/goods-list/row-list'
	import columnList from '@/components/goods-list/column-list'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			rowsList,
			columnList,
			MescrollUni
		},
		data() {
			return {
				showType: true,
				goodsList: [],
				baseUrl: this.$api.baseUrl,
				// downOptiono: {
				// 	use: true,
				// 	auto: true,
				// },
				// upOption: {
				// 	use: true,
				// 	auto: true,
				// 	page: {
				// 		num: 0,
				// 		size: 12
				// 	},
				// 	noMoreSize: 5,
				// 	empty: {
				// 		tip: '暂无相关数据',
				// 	}
				// }
			}
		},
		onLoad(options) {
			let cid = options.cid ? options.cid : 0;
			this.$api.goodsIndex({cid: cid, keyword: '', priceOrder: true, salesOrder: false, new: 0, page: 1}).then((res) => {
				this.goodsList = res.data.data
			})
		},
		methods: {
			changeList() {
				this.showType = !this.showType
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第1种: 请求具体接口
				uni.request({
					url: 'xxxx',
					success: () => {
						// 成功隐藏下拉加载状态
						mescroll.endSuccess()
					},
					fail: () => {
						// 失败隐藏下拉加载状态
						mescroll.endErr()
					}
				})
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				// 第3种: 下拉刷新什么也不处理, 可直接调用或者延时一会调用 mescroll.endSuccess() 结束即可
				mescroll.endSuccess()
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				// 此时mescroll会携带page的参数:
				let pageNum = mescroll.num; // 页码, 默认从1开始
				let pageSize = mescroll.size; // 页长, 默认每页10条
				uni.request({
					url: 'xxxx?pageNum=' + pageNum + '&pageSize=' + pageSize,
					success: (data) => {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.xxx;
						// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
						let totalPage = data.xxx;
						// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
						let totalSize = data.xxx;
						// 接口返回的是否有下一页 (true/false)
						let hasNext = data.xxx;

						//设置列表数据
						if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据

						// 成功隐藏下拉加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(curPageData.length, totalPage);

						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						//mescroll.endBySize(curPageData.length, totalSize); 

						//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
						//mescroll.endSuccess(curPageData.length, hasNext); 

						//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
						//如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
						//如果传了hasNext,则翻到第二页即可显示无更多数据.
						//mescroll.endSuccess(curPageData.length);

						// 如果渲染的数据较复杂,可延时隐藏下拉加载状态: 如
						this.$nextTick(() => {
							mescroll.endSuccess(curPageData.length)
						})
					},
					fail: () => {
						// 失败隐藏下拉加载状态
						mescroll.endErr()
					}
				})
			}
		},
	}
</script>

<style>

</style>
